

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的订单</title>
    <style type="text/css">
    	*{
    width: 100%;
	padding: 0px;
	margin: 0px;

}
.top{
	width:100%;
	height: 40px;
	margin: 40px auto 0px;
	color:#000;
	border:0px;
	display: block;
	text-align: center;
}
.leftreturn{
  position: absolute;
  left:0;
  z-index: 5;
  background-image: url("../../image/leftreturn.png");
  background-position: 0px 0px;
  width:25px;
  height:25px;
  margin:7.5px 0;
}
.top-title{
  line-height: 40px;
  font-size: 20px;
}
.content{
	width:95%;
	height: auto;
	margin: 10px auto;
	background: white;
	color:#000000;
  border: 1px solid #ccc;
  border-radius: 8px;
	font-size: 14px;
  padding-bottom: 5px;
}


.content-xinxi{
	width:100%;
	height: 80px;
	margin: 0 auto;
	background: white;
	color:#000000;
	border:0px;
	display: block;
	font-size: 17px;
	margin-top: 15px;

}
.picture{
  width:70px;
	height: 70px;
	border: 1px solid #f5f5f5;
	margin-left: 10px;
  margin-right: 3px;
  padding: 2px;
  float: left;

}
.content-text{
	width:90%;
	height: 30px;
	margin:  auto;
	color:#000000;
	border:1px;
	border-style: solid;
	border-color: #999999;
	display: block;
	font-size: 14px;
	float: left;
}
.content-xinxi1{
  width: auto;
  float: left;
  margin-left: 5px;
  padding: 2px;
}
.xinxi1_title{
  width:210px;
  font-size: 12px;
  font-family: songti;
  color:#000;
  height:36px;
  margin:0;
}
.xinxi1_classfy{
  width:200px;
  height:auto;
  background-color:#f5f5f5;
  font-size: 10px;
  font-family: songti;
  padding-left: 10px;
}
.xinxi1_money{
  width:auto;
  float:right;
  font-size: 16px;
}
.xinxi1_sum{
  width:auto;
  float:right;
  margin-left:5px;
  font-size:12px;
  color: #ccc;
  margin-top:3px;
}

.bgcolor{
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fafafa;
  z-index: -1;
}
.content-xinxidetail{
text-align: center;
padding-top: 5px;
font-size: 14px;
height:20px;
  width:auto;

}
.content_footer{
  width:auto;height:40px;
  margin-top: 10px;
}
.footer_dd{
  width:auto;
  height:30px;
  padding: 0 10px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 20px;
  float: right;
  margin-right: 8px;
  color: #444343;
}

.tabs{
       width:100%;height:400px;float:left;  background: #fafafa;
   }
#container{
       width:100%;height:auto;float:left;   background: #fafafa;
   }
 .ct-ul{
       width:100%;height:30px;float:left;margin:0px;padding:0px;
   }
   .ct-ul li{
       width:25%;float:left ;font-size:14px;margin:0px;line-height: 30px;
       text-align: center;
        display: inline;
   }
   .act{
     color: #4A87A1;
   }
  li:hover{
   color: #4A87A1;

   display: inline-block;
   cursor: pointer;
  }
    </style>
</head>
<body>
<div class="bgcolor">
	<div class="top">
    <i class="leftreturn" onclick="Winclose();"></i>
		<h1 class="top-title">我的订单</h1>
	</div>
  <div class="tabs">
      <nav id="nav">
         <ul class="ct-ul">
           <li class="act">全部订单</li>
           <li>未付款</li>
           <li>未发货</li>
           <li>待收货</li>
         </ul>
      </nav>
      <div id="container">
         <section class="tab" >
           <div class="item">
             <div class="content">
           		<div class="content-xinxi">
           			<div class="picture">
                           <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/d68a1b4db9aae6fece7d173be0caec21.jpeg"></a>
                       </div>
           			<div class="content-xinxi1">
                   <p class="xinxi1_title">黄焖鸡</p>
                   <p class="xinxi1_classfy">详情介绍：包含：黄焖鸡一份、米饭、芙蓉汤。</p>
                   <p class="xinxi1_sum">×1</p>
                   <p class="xinxi1_money">￥16.8</p>
           			</div>
           		</div>
           		<div class="content-xinxi">
           			<div class="picture">
                           <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/52d6d184816037aab12566c3b5d37488.jpeg"></a>
                       </div>
                       <div class="content-xinxi1">
                         <p class="xinxi1_title">蒜香小龙虾</p>
                         <p class="xinxi1_classfy">详情介绍：秘制卤水，独家秘方</p>
                         <p class="xinxi1_sum">×1</p>
                         <p class="xinxi1_money">￥98.8</p>
                 			</div>
           		</div>
           		<div class="content-xinxi">
           			<div class="picture">
                           <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/d521bb861db5e1ed70a68665f48ec946.jpeg"></a>
                       </div>
                       <div class="content-xinxi1">
                         <p class="xinxi1_title">炸鸡块</p>
                         <p class="xinxi1_classfy">详情介绍：香嫩炸鸡块</p>
                         <p class="xinxi1_sum">×1</p>
                         <p class="xinxi1_money">￥20.8</p>
                 			</div>
           		</div>
               <p class="content-xinxidetail">总价：￥136.4&nbsp优惠：￥&nbsp实付款：￥136.4</p>
               <div class="content_footer">
                 <p class="footer_dd">查看物流</p>
                 <p class="footer_dd">确认订单</p>
               </div>
             </div>
             <div class="content">
               <div class="content-xinxi">
                 <div class="picture">
                            <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/d68a1b4db9aae6fece7d173be0caec21.jpeg"></a>
                        </div>
                 <div class="content-xinxi1">
                   <p class="xinxi1_title">黄焖鸡</p>
                   <p class="xinxi1_classfy">详情介绍：包含：黄焖鸡一份、米饭、芙蓉汤。</p>
                   <p class="xinxi1_sum">×1</p>
                   <p class="xinxi1_money">￥16.8</p>
                 </div>
               </div>
               <div class="content-xinxi">
                 <div class="picture">
                            <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/52d6d184816037aab12566c3b5d37488.jpeg"></a>
                        </div>
                        <div class="content-xinxi1">
                          <p class="xinxi1_title">蒜香小龙虾</p>
                          <p class="xinxi1_classfy">详情介绍：秘制卤水，独家秘方</p>
                          <p class="xinxi1_sum">×1</p>
                          <p class="xinxi1_money">￥98.8</p>
                       </div>
               </div>
                <p class="content-xinxidetail">总价：￥115.6&nbsp优惠：￥0&nbsp实付款：￥115.6</p>
                <div class="content_footer">
                  <p class="footer_dd">查看物流</p>
                  <p class="footer_dd">确认订单</p>
                </div>
              </div>
             <div class="content">
                <div class="content-xinxi">
                  <div class="picture">
                             <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/d521bb861db5e1ed70a68665f48ec946.jpeg"></a>
                         </div>
                  <div class="content-xinxi1">
                    <p class="xinxi1_title">炸鸡块</p>
                    <p class="xinxi1_classfy">详情介绍：香嫩炸鸡块</p>
                    <p class="xinxi1_sum">×1</p>
                    <p class="xinxi1_money">￥20.8</p>
                  </div>
                </div>
                <div class="content-xinxi">
                  <div class="picture">
                             <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/52d6d184816037aab12566c3b5d37488.jpeg"></a>
                         </div>
                         <div class="content-xinxi1">
                           <p class="xinxi1_title">蒜香小龙虾</p>
                           <p class="xinxi1_classfy">详情介绍：秘制卤水，独家秘方</p>
                           <p class="xinxi1_sum">×1</p>
                           <p class="xinxi1_money">￥98.8</p>
                        </div>
                </div>
                 <p class="content-xinxidetail">总价：￥119.6&nbsp优惠：￥0&nbsp实付款：￥119.6</p>
                 <div class="content_footer">
                   <p class="footer_dd">提醒发货</p>
                 </div>
               </div>
             <div class="content">
                 <div class="content-xinxi">
                   <div class="picture">
                              <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/52d6d184816037aab12566c3b5d37488.jpeg"></a>
                          </div>
                   <div class="content-xinxi1">
                     <p class="xinxi1_title">蒜香小龙虾</p>
                     <p class="xinxi1_classfy">详情介绍：秘制卤水，独家秘方</p>
                     <p class="xinxi1_sum">×1</p>
                     <p class="xinxi1_money">￥98.8</p>
                   </div>
                 </div>
                 <div class="content-xinxi">
                   <div class="picture">
                              <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/d521bb861db5e1ed70a68665f48ec946.jpeg"></a>
                          </div>
                          <div class="content-xinxi1">
                            <p class="xinxi1_title">炸鸡块</p>
                            <p class="xinxi1_classfy">详情介绍：香嫩炸鸡块</p>
                            <p class="xinxi1_sum">×1</p>
                            <p class="xinxi1_money">￥20.8</p>
                         </div>
                 </div>
                  <p class="content-xinxidetail">总价：￥119.6&nbsp优惠：￥0&nbsp实付款：￥100.0</p>
                  <div class="content_footer">
                    <p class="footer_dd">付款</p>
                    <p class="footer_dd">取消订单</p>
                  </div>
                </div>
           </div>
         </section>
         <section class="tab" >
           <div class="item">
             <div class="content">
                 <div class="content-xinxi">
                   <div class="picture">
                              <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/52d6d184816037aab12566c3b5d37488.jpeg"></a>
                          </div>
                   <div class="content-xinxi1">
                     <p class="xinxi1_title">蒜香小龙虾</p>
                     <p class="xinxi1_classfy">详情介绍：秘制卤水，独家秘方</p>
                     <p class="xinxi1_sum">×1</p>
                     <p class="xinxi1_money">￥98.8</p>
                   </div>
                 </div>
                 <div class="content-xinxi">
                   <div class="picture">
                              <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/d521bb861db5e1ed70a68665f48ec946.jpeg"></a>
                          </div>
                          <div class="content-xinxi1">
                            <p class="xinxi1_title">炸鸡块</p>
                            <p class="xinxi1_classfy">详情介绍：香嫩炸鸡块</p>
                            <p class="xinxi1_sum">×1</p>
                            <p class="xinxi1_money">￥20.8</p>
                         </div>
                 </div>
                  <p class="content-xinxidetail">总价：￥119.6&nbsp优惠：￥0&nbsp实付款：￥100.0</p>
                  <div class="content_footer">
                    <p class="footer_dd">付款</p>
                    <p class="footer_dd">取消订单</p>
                  </div>
                </div>


           </div>
         </section>
         <section class="tab">
           <div class="item">
             <div class="content">
                <div class="content-xinxi">
                  <div class="picture">
                             <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/d521bb861db5e1ed70a68665f48ec946.jpeg"></a>
                         </div>
                  <div class="content-xinxi1">
                    <p class="xinxi1_title">炸鸡块</p>
                    <p class="xinxi1_classfy">详情介绍：香嫩炸鸡块</p>
                    <p class="xinxi1_sum">×1</p>
                    <p class="xinxi1_money">￥20.8</p>
                  </div>
                </div>
                <div class="content-xinxi">
                  <div class="picture">
                             <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/52d6d184816037aab12566c3b5d37488.jpeg"></a>
                         </div>
                         <div class="content-xinxi1">
                           <p class="xinxi1_title">蒜香小龙虾</p>
                           <p class="xinxi1_classfy">详情介绍：秘制卤水，独家秘方</p>
                           <p class="xinxi1_sum">×1</p>
                           <p class="xinxi1_money">￥98.8</p>
                        </div>
                </div>
                 <p class="content-xinxidetail">总价：￥119.6&nbsp优惠：￥0&nbsp实付款：￥119.6</p>
                 <div class="content_footer">
                   <p class="footer_dd">提醒发货</p>
                 </div>
               </div>

           </div>
         </section>
         <section class="tab" >
           <div class="item">
             <div class="content">
           		<div class="content-xinxi">
           			<div class="picture">
                           <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/d68a1b4db9aae6fece7d173be0caec21.jpeg"></a>
                       </div>
           			<div class="content-xinxi1">
                   <p class="xinxi1_title">黄焖鸡</p>
                   <p class="xinxi1_classfy">详情介绍：包含：黄焖鸡一份、米饭、芙蓉汤。</p>
                   <p class="xinxi1_sum">×1</p>
                   <p class="xinxi1_money">￥16.8</p>
           			</div>
           		</div>
           		<div class="content-xinxi">
           			<div class="picture">
                           <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/52d6d184816037aab12566c3b5d37488.jpeg"></a>
                       </div>
                       <div class="content-xinxi1">
                         <p class="xinxi1_title">蒜香小龙虾</p>
                         <p class="xinxi1_classfy">详情介绍：秘制卤水，独家秘方</p>
                         <p class="xinxi1_sum">×1</p>
                         <p class="xinxi1_money">￥98.8</p>
                 			</div>
           		</div>
           		<div class="content-xinxi">
           			<div class="picture">
                           <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/d521bb861db5e1ed70a68665f48ec946.jpeg"></a>
                       </div>
                       <div class="content-xinxi1">
                         <p class="xinxi1_title">炸鸡块</p>
                         <p class="xinxi1_classfy">详情介绍：香嫩炸鸡块</p>
                         <p class="xinxi1_sum">×1</p>
                         <p class="xinxi1_money">￥20.8</p>
                 			</div>
           		</div>
               <p class="content-xinxidetail">总价：￥136.4&nbsp优惠：￥&nbsp实付款：￥136.4</p>
               <div class="content_footer">
                 <p class="footer_dd">查看物流</p>
                 <p class="footer_dd">确认订单</p>
               </div>
             </div>
             <div class="content">
               <div class="content-xinxi">
                 <div class="picture">
                            <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/d68a1b4db9aae6fece7d173be0caec21.jpeg"></a>
                        </div>
                 <div class="content-xinxi1">
                   <p class="xinxi1_title">黄焖鸡</p>
                   <p class="xinxi1_classfy">详情介绍：包含：黄焖鸡一份、米饭、芙蓉汤。</p>
                   <p class="xinxi1_sum">×1</p>
                   <p class="xinxi1_money">￥16.8</p>
                 </div>
               </div>
               <div class="content-xinxi">
                 <div class="picture">
                            <a href="#"><img src="http://a5aa3a065d37117d9360.test.upcdn.net/apicloud/52d6d184816037aab12566c3b5d37488.jpeg"></a>
                        </div>
                        <div class="content-xinxi1">
                          <p class="xinxi1_title">蒜香小龙虾</p>
                          <p class="xinxi1_classfy">详情介绍：秘制卤水，独家秘方</p>
                          <p class="xinxi1_sum">×1</p>
                          <p class="xinxi1_money">￥98.8</p>
                       </div>
               </div>
                <p class="content-xinxidetail">总价：￥115.6&nbsp优惠：￥0&nbsp实付款：￥115.6</p>
                <div class="content_footer">
                  <p class="footer_dd">查看物流</p>
                  <p class="footer_dd">确认订单</p>
                </div>
              </div>

           </div>
         </section>
        </div>
  </div>

</div>


</body>
<script>
 window.onload=function () {
 var nav=document.getElementById('nav');
 var oNav=nav.getElementsByTagName('li');

 var container=document.getElementById('container');
 var oDiv=container.getElementsByClassName('tab');
 for(var i=0;i<oNav.length;i++){
  oNav[i].index=i;
  oNav[i].onclick=function () {
  for(var i=0;i<oNav.length;i++){
   oNav[i].className='';
   oDiv[i].style.display="none";
  }
  this.className='act';
  oDiv[this.index].style.display="block"
  }
  for(var m=1;m<oNav.length;m++){
   oNav[m].className='';
   oDiv[m].style.display="none";
  }
 }
 };

 function Winclose() {
  api.closeWin();
}
</script>
</html>
